<script setup lang="ts">
import { ref, onMounted, onActivated } from "vue"
import { useRouter, useRoute } from "vue-router"
import { showToast } from "vant"
import { getSearchBanner_c } from '@/api/lidare'
import PhoneDataCard from '@/components/home/PhoneDataCard.vue'
const router = useRouter();
const route = useRoute()
const path = ref();
const value = ref('')

const shBanner = ref({
  id: String,
  picUrl: String,
})



const kw = ref()

onActivated(async () => {
  kw.value = route.params.kw
  value.value = kw.value
  console.log('进入搜索结果页面');
  let { data } = await getSearchBanner_c()
  shBanner.value = data._data.bannerInfo

});

// 搜索
const historyData = ref(<Array<string>>([]));
historyData.value = JSON.parse(localStorage.getItem('historyList') as string) || [];
const onSearch = (val: string) => {
  console.log(val);
  if (!val) {
    return
  } else {
    historyData.value = historyData.value.filter(o => o != val)
    historyData.value = [val, ...historyData.value]
    localStorage.setItem("historyList", JSON.stringify(historyData.value));
    kw.value = val
  }
}



onMounted(async () => {
  value.value = kw.value
  console.log('进入搜索结果页面');

  let { data } = await getSearchBanner_c()
  shBanner.value = data._data.bannerInfo
});
const agreement = ref(false);
</script>
<template>
  <div class="search-result fixed-zbest">
    <div class="search-head">
      <van-icon name="arrow-left" size="18" @click="router.back()" />
      <van-search v-model="value" placeholder="清仓特价" @search="onSearch" class="search-box" />
      <van-icon name="service-o" size="25" />
    </div>
    <div class="sh-banner">
      <img :src="shBanner.picUrl" alt="">
    </div>
    <PhoneDataCard :keyword="kw" :top="174" :phId="'0'"/>
  </div>
</template>

<style lang="scss" scoped>
.search-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  background-color: #fff;

  .search-box {
    width: 295px;
  }

}

.sh-banner {
  width: 100%;
  position: fixed;
  top: .54rem;
  z-index: 30;
  background-color: #fff;

  >img {
    width: 100%;
  }
}

.search-result {
  padding-top: 174px;
  overflow: scroll;
  background-color: #f6f7fa;
}
</style>